<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .container {
        width: 520px;
        height: 280px;
        position: relative;
        overflow: hidden;
        margin: 0 auto;
      }
      .change {
        position: absolute;
        display: flex;
        justify-content: space-evenly;
        width: 100px;
        height: 20px;
        left: 210px;
        bottom: 20px;
        z-index: 1;
      }
      .change p {
        width: 15px;
        height: 15px;
        float: left;
        border-radius: 50%;
        background-color: blue;
      }
      .imgContainer {
        position: absolute;
        width: 2600px;
        height: 280px;
        left: 0px;
      }

      .imgContainer img {
        float: left;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="change">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
      </div>
      <div class="imgContainer">
        <img src="./imgs/1t.png" />
        <img src="./imgs/2t.png" />
        <img src="./imgs/3t.png" />
        <img src="./imgs/4t.png" />
        <img src="./imgs/5t.png" />
      </div>
    </div>
    <script>
      // 1。上一页（复制最后一张到第一张前面） 和下一页 （无限轮播）
      // 鼠标移入 imgContainerEle 停止自动轮播
      // 2.点
      // 复习；

      var imgContainerEle = document.querySelector(".imgContainer");

      var page = 1; // 代表当前的图片

      // 克隆第一张图；
      // 将第一张图 放在第六张 盒子放不下 所以宽度增加  相册 放所有图片+第一张图
      clonePicOne();
      function clonePicOne() {
        var firstEle = imgContainerEle.firstElementChild.cloneNode(true);
        imgContainerEle.style.width = "3120px";
        imgContainerEle.appendChild(firstEle);
      }
      // 自动播放, 一直播放-> 用setintrrval
      //每两秒相册移动520px 视口盒子不能动 move函数实现
      autoPlay();
      function autoPlay() {
        setInterval(function () {
          move(imgContainerEle, -520 * page, "left", function () {
            console.log("运动完成");
            page++;
            //当执行第六次，第六张图是图一，将page设置为1，并且将图左偏移量设置为0  下一张图是 图二left，视觉效果上实现轮播
            if (page == 6) {
              page = 1;
              imgContainerEle.style.left = "0px";
            }
          });
        }, 2000);
      }
      //图片移动函数
      function move(ele, target, dir, cb) {
        function fn() {
          var num = parseInt(getComputedStyle(ele)[dir]);
          var speed = target < num ? -10 : 10;
          if (num == target) {
            console.log("停止了");
            cb && cb();
          } else {
            num += speed;
            ele.style[dir] = num + "px";
            requestAnimationFrame(fn);
          }
        }
        fn();
      }
    </script>
  </body>
</html>
